<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="custom-navigation flex justify-center align-center">
			<view class="title">邀请好友</view>
			<view class="left-arrow-wrapper flex align-center" @tap="back">
				<u-icon name="arrow-left" size="40" color="#fff"></u-icon>
			</view>
		</view>

		<view class="share-bg flex flex-column align-center">
			<view class="title">
				邀请好友即可获得奖励
			</view>
			<view class="share-code-title" @tap="copy(info.invit)">推广码</view>
			<view class="share-code flex align-center justify-center">{{info.invit}}</view>
			<view class="tip">
				点击推广码自动复制
			</view>
			<view class="copy-btn" @tap="copy(info.invit_url)">
				复制链接邀请
			</view>
		</view>
		<view class="share-join-bottom">
			<view class="share-friend-wrapper">
				<view class="flex share-friend-header align-center justify-between">
					<text class="label">已邀请的好友</text>
					<view class="reward-detail" @tap="showDialog=true">邀请规则 》</view>
				</view>
				<view class="content">
					<view class="number-count-wrapper flex justify-between align-end">
						<view class="flex flex-column">
							<text class="count-label">累计邀请人数</text>
							<text class="count-value">{{info.people}}</text>
						</view>
						<view class="flex flex-column">
							<text class="count-label">有效账户</text>
							<text class="count-value">{{info.tui_valid}}</text>
						</view>
						<view class="flex flex-column">
							<text class="count-label">累计获得奖励</text>
							<text class="count-value">{{info.money_sum}}</text>
						</view>
						<!-- <router-link to="" class="my-buttle-btn">我的钱包</router-link> -->
					</view>
					<view class="number-count-wrapper flex justify-between align-end">
						<view class="flex flex-column">
							<text class="count-label">上周获得奖励</text>
							<text class="count-value">{{info.last_shouyi}}</text>
						</view>
						<view class="flex flex-column">
							<text class="count-label">待结算奖励</text>
							<text class="count-value">{{info.order_shouyi_get}}</text>
						</view>
						<view class="flex flex-column">
							<text class="count-label">钱包</text>
							<text class="count-value">{{info.order_shouyi_qianbao}}
								<text style="color: #08c;" @click="lingqu()">(领取)</text>
							</text>
						</view>
						<!-- <router-link to="" class="my-buttle-btn">我的钱包</router-link> -->
					</view>
					<view class="tip-wrapper">
						<text class="tip-label">温馨提示:</text>
						<text class="tip-text">系统每周一会将奖励金结算至钱包， 你可以在钱包中随时领取提现。</text>
					</view>
				</view>
			</view>

			<view class="share-code-wrapper">
				<view class="flex share-code-header align-center justify-between">
					<text class="label">推广二维码</text>
					<!-- <router-link class="action-detail" to="">活动规则 》</router-link> -->
				</view>
				<view class="content flex flex-column align-center">
					<tki-qrcode v-if="info.invit_url" ref="qrcode" :val="info.invit_url" :size="240" background="#fff"
						@result="result" />
					<view class="download-link" @tap="download">保存二维码</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showDialog" mode="center" border-radius="15">
			<view class="dialog-wrapper">
				<view class="header flex justify-center align-center">
					<text class="title">活动条款</text>
				</view>
				<view class="body">
					<view class="rule-item flex align-center">
						<text class="dot"></text>
						<text class="label">活动时间：</text>
						<text class="rule-content">即日起</text>
					</view>
					<view class="rule-item flex align-center">
						<text class="dot"></text>
						<text class="label">活动对象：邀请人：</text>
						<text class="rule-content">已入金激活的真实交易账户；</text>
					</view>
					<view class="rule-item flex align-center">
						<text class="label">被邀请人：</text>
						<text class="rule-content">未入金激活的账号</text>
					</view>
					<view class="rule-item flex align-center">
						<text class="dot"></text>
						<text class="label">活动规则：</text>
					</view>
					<view class="rule-line" v-for="(item, index) in info.tui_u_rate_arr" :key="index">
						邀请{{index}}个有效账户奖励每手手续费的{{item}}%
					</view>
					
					<view class="rule-item flex align-center">
						<text class="dot"></text>
						<text class="label">注明：</text>
					</view>
					<view class="rule-line">
						每周有入金下单的即为有效客户。
					</view>
					<view class="rule-line">
						奖励金为每周一结算至钱包，可领取至账户提现。
					</view>
					
					
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tkiQrcode from "tki-qrcode/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				info: {},
				url: "",
				showDialog: false
			};
		},
		methods: {
			back() {
				this.$Router.back(1)
			},
			lingqu() {

				try {
					this.$u.api.qianbaoLingquApi().then(() => {
						uni.showToast({
							icon: "success",
							title: "领取成功"
						})
						this.info.order_shouyi_qianbao = "0.00";
						console.log(123)

					})
				} catch (e) {
					//TODO handle the exception
				}
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						uni.showToast({
							icon: "success",
							title: "复制成功"
						})
					}
				});
			},
			result(url) {
				this.url = url
			},
			download() {
				//#ifdef APP-PLUS
				this.$refs.qrcode._saveCode()
				//#endif

				//#ifdef H5
				console.log("download", this.url)
				let a = document.createElement("a")
				let clickEvent = document.createEvent("MouseEvents");
				a.setAttribute("href", this.url)
				a.setAttribute("download", 'codeImg')
				a.setAttribute("target", '_blank')
				clickEvent.initEvent('click', true, true)
				a.dispatchEvent(clickEvent);
				//#endif
			}
		},
		async onShow() {
			try {
				this.info = await this.$u.api.shareJoinApi()
				this.$nextTick(() => {
					this.$refs.qrcode._makeCode()
				})
			} catch (e) {
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.dialog-wrapper {
			border-radius: 15rpx;
			background-color: #fff;

			.header {
				background-color: $color-pink;
				height: 70rpx;
				border-radius: 15rpx 15rpx 0 0;

				.title {
					font-size: 30rpx;
					color: #fff;
				}
			}

			.body {
				padding: 30rpx;

				.rule-item {
					margin-bottom: 10rpx;

					.dot {
						margin-right: 10rpx;
						height: 20rpx;
						width: 20rpx;
						border-radius: 50%;
						background-color: $color-pink;
					}

					.label {
						font-size: 24rpx;
						color: #999;
					}

					.rule-content {
						font-size: 24rpx;
						font-weight: bold;
						color: #9c9c9c;
					}
				}

				.rule-line {
					margin-left: 30rpx;
					margin-bottom: 10rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.status_bar {
			background: linear-gradient(128deg, #FF905A 0%, #FF915B 100%);

			&::after {
				background: linear-gradient(128deg, #FF905A 0%, #FF915B 100%);
			}
		}

		.placeholder {
			&::after {
				content: " ";
				display: block;
				height: 112rpx;
			}
		}

		.custom-navigation {
			position: fixed;
			top: var(--status-bar-height);
			left: 0;
			width: 100%;
			height: 112rpx;
			background: linear-gradient(128deg, #FF905A 0%, #FF915B 100%);

			.title {
				font-size: 36rpx;
				color: #fff;
				font-weight: 600;
			}

			.left-arrow-wrapper {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 30rpx;
				height: 100%;
			}
		}

		.share-bg {
			padding-top: 210rpx;
			height: 882rpx;
			background: url("~@/static/images/shareJoin/share-join-bg.png");
			background-size: 100% 100%;

			.title {
				width: 370rpx;
				font-size: 50rpx;
				color: #FF2D01;
				text-align: center;
			}

			.share-code-title {
				margin-top: 88rpx;
				font-size: 28rpx;
				color: #CF4636;
			}

			.share-code {
				margin-top: 40rpx;
				width: 276rpx;
				height: 98rpx;
				background: #FFEDDE;
				border-radius: 18rpx;
				border: 2rpx solid #FEC295;
				font-size: 58rpx;
				font-weight: bold;
				color: #CC4500;
				line-height: 98rpx;
				text-align: center;
			}

			.tip {
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #FF6F2A;
			}

			.copy-btn {
				margin-top: 120rpx;
				padding: 38rpx 0 76rpx;
				width: 490rpx;
				height: 170rpx;
				background: url("~@/static/images/shareJoin/copy-btn.png");
				background-size: 100% 100%;
				text-align: center;
				font-weight: 600;
				color: #FFEDDE;
				font-size: 40rpx;
			}
		}

		.share-join-bottom {
			padding: 60rpx 30rpx;
			background: #F9EBDE;

			.share-friend-wrapper {
				background: #FFFFFF;
				border-radius: 16px;

				.share-friend-header {
					padding: 0 30rpx;
					height: 90rpx;
					background: #FFF8F2;
					border-radius: 16rpx 16rpx 0px 0px;

					.label {
						font-size: 32rpx;
						font-weight: 500;
						color: #000000;
					}

					.reward-detail {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.content {
					padding: 30rpx;

					.number-count-wrapper {
						.count-label {
							font-size: 24rpx;
							color: #999999;
						}

						.count-value {
							margin-top: 16rpx;
							font-weight: 600;
							color: #000000;
						}

						.my-buttle-btn {
							opacity: 0;
							width: 156rpx;
							height: 54rpx;
							background: #FF6010;
							border-radius: 27rpx;
							font-size: 24rpx;
							text-align: center;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 54rpx;

						}

						.flex-column {
							width: 33%;
						}
					}

					.tip-wrapper {
						margin-top: 32rpx;

						.tip-label {
							font-size: 24rpx;
							color: #FF6011;
						}

						.tip-text {
							font-size: 24rpx;
							color: #5D667A;
						}
					}
				}
			}

			.share-code-wrapper {
				margin-top: 30rpx;
				background: #FFFFFF;
				border-radius: 16px;

				.share-code-header {
					padding: 0 30rpx;
					height: 90rpx;
					background: #FFF8F2;
					border-radius: 16rpx 16rpx 0px 0px;

					.label {
						font-size: 32rpx;
						font-weight: 500;
						color: #000000;
					}

					.action-detail {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.content {
					padding: 40rpx 0;
					background-color: #fff;

					.download-link {
						margin-top: 40rpx;
						font-size: 24rpx;
						color: #1677FF;
					}
				}
			}
		}

	}
</style>
